import { ProDescriptions, ProTable } from "@ant-design/pro-components";
import { execute, getTempUrl } from "../service";
import { history, useModel, useRequest } from "@umijs/max";
import { Image, Space, Tooltip } from "antd";
import { ArrowRightOutlined, EyeOutlined } from "@ant-design/icons";
import CustomCode from "@/components/CustomCode";
import { StatisticCard } from '@ant-design/pro-components';
import { useState } from 'react';
import CustomPie from './CustomPie'

const { Statistic, Divider } = StatisticCard;

const RunResult: React.FC<any> = ({
    currentRow
}) => {
    const { initialState } = useModel('@@initialState');

    const { data, loading } = useRequest(async () => execute({
        projectId: initialState?.currentProject?.id,
        id: currentRow?.id,
    }), { ready: !!currentRow?.id, manual: false })

    return <Space size={[0, 16]} direction='vertical' style={{ width: '100%' }}>
        <ProDescriptions
            loading={loading}
            title="用例报告汇总明细"
            columns={[
                {
                    title: '执行状态',
                    dataIndex: 'executeState',
                    valueType: 'select',
                    valueEnum: {
                        true: { text: '成功', status: 'success' },
                        false: { text: '失败', status: 'error' },
                    }
                },
                {
                    title: '开始时间',
                    dataIndex: 'startTime',
                    valueType: 'dateTime',
                },
                {
                    title: '结束时间',
                    dataIndex: 'endTime',
                    valueType: 'dateTime',
                },
                {
                    title: '执行耗时',
                    tooltip: '测试用例执行所耗费的时间，单位为秒',
                    dataIndex: 'expendTime',
                    renderText(text, record, index, action) {
                        return text ? Math.ceil(text / 1000) + '秒' : '-'
                    },
                },
                {
                    title: '操作',
                    valueType: 'option',
                    hideInDescriptions: !data?.reportId,
                    render: () => [
                        <a key="link" onClick={() => {
                            history.push('/report/ui-test?id=' + data?.reportId)
                        }}>
                            <ArrowRightOutlined />{' '}
                            去报告明细页查看
                        </a>
                    ],
                },

            ]}
            dataSource={data}
        />

        <StatisticCard.Group loading={loading} direction={'row'}>
            <StatisticCard
                statistic={{
                    title: '执行总数',
                    value: data?.quantity,
                }}
            />
            <Divider type={'vertical'} />
            <StatisticCard
                statistic={{
                    title: '成功数量',
                    value: data?.passQuantity,
                    description: <Statistic title="占比" value={Number(data?.passQuantity / data?.quantity * 100).toFixed(2) + '%'} />,
                }}
                chart={
                    <CustomPie type="success" quantity={data?.quantity} current={data?.passQuantity} />
                }
                chartPlacement="left"
            />
            <StatisticCard
                statistic={{
                    title: '失败数量',
                    value: data?.failQuantity,
                    description: <Statistic title="占比" value={Number(data?.failQuantity / data?.quantity * 100).toFixed(2) + '%'} />,
                }}
                chart={
                    <CustomPie type="error" quantity={data?.quantity} current={data?.failQuantity} />
                }
                chartPlacement="left"
            />
        </StatisticCard.Group>

        <ProTable<any>
            rowKey={row => row?.uiCaseStep?.id}
            search={false}
            dataSource={data?.list}
            pagination={false}
            loading={loading}
            scroll={{ x: 'max-content' }}
            toolBarRender={false}
            columns={[
                {
                    title: '序号',
                    valueType: 'indexBorder',
                    fixed: 'left',
                    width: 60,
                },
                {
                    title: '步骤名称',
                    dataIndex: ['step', 'name'],
                },
                {
                    title: '接口地址',
                    dataIndex: ['step', 'path'],
                },
                {
                    title: '响应结果',
                    dataIndex: 'responseBody',
                    render(dom, entity, index, action, schema) {
                        return <CustomCode value={dom} />
                    },
                },
                {
                    title: '报告ID',
                    dataIndex: 'reportId',
                    render(dom, entity, index, action, schema) {
                        return <Tooltip title="去报告明细页查看">
                            <a style={{ textDecoration: 'underline' }} onClick={() => {
                                history.push('/report/ui-test?id=' + dom)
                            }}>{dom}</a>
                        </Tooltip>
                    },
                },
                {
                    title: '执行状态',
                    dataIndex: 'executeState',
                    valueType: 'select',
                    valueEnum: {
                        true: { text: '成功', status: 'success' },
                        false: { text: '失败', status: 'error' },
                    }
                },
                {
                    title: '断言状态',
                    dataIndex: 'assertionState',
                    valueType: 'select',
                    valueEnum: {
                        true: { text: '成功', status: 'success' },
                        false: { text: '失败', status: 'error' },
                    }
                },
                {
                    title: '异常信息',
                    dataIndex: 'exceptionMsg',
                    render(dom, entity, index, action, schema) {
                        const element = <div style={{
                            height: 200,
                            backgroundColor: 'rgba(150, 150, 150, 0.1)',
                            padding: '5px 10px',
                            width: 400,
                            overflow: 'auto'
                        }}>{dom}</div>
                        return entity?.exceptionMsg ? <Tooltip title={element}
                            overlayInnerStyle={{ width: 418 }}
                        >
                            <div style={{
                                height: '100%',
                                overflow: 'hidden',
                                whiteSpace: 'nowrap',
                                textOverflow: 'ellipsis',
                                backgroundColor: 'rgba(150, 150, 150, 0.1)',
                                padding: '5px 10px',
                                width: 200,
                                display: 'inline-block'
                            }}>{dom}</div>
                        </Tooltip> : '-'
                    },
                },
                {
                    title: '耗时',
                    dataIndex: 'expendTime',
                    render(dom, entity, index, action, schema) {
                        return dom ? Math.ceil(entity?.expendTime / 1000) + '秒' : '-'
                    },
                },
            ]}
        />
    </Space>;
}

export default RunResult